<template>
  <div class="Navbar-container">
    <ul class="item-container">
      <li @click="handleClick('/home')" :class="[$route.path === '/home' ? 'path_active' : '']"><span class="iconfont icon-zhuye" ></span><span>主页</span></li>
      <li @click="handleClick('/order')" :class="[$route.path === '/order' ? 'path_active' : '']"><span class="iconfont icon-dingdan" ></span><span>订单</span></li>
      <li @click="handleClick('/search')" :class="[$route.path === '/search' ? 'path_active' : '']"><span class="iconfont icon-sousuo" ></span>搜索<span></span></li>
      <li @click="handleClick('/personal')" :class="[$route.path === '/personal' ? 'path_active' : '']"><span class="iconfont icon-gerenzhongxin " ></span><span>个人中心</span></li>
    </ul>
  </div>
</template>
<script>
export default {
  name: 'Navbar',
  methods: {
    handleClick: function (path) {
      // console.log(path, this.$route.path)
      if (path !== this.$route.path) {
        this.$router.replace(path)
      }
    }
  }
}
</script>
<style scoped>
@import './Navbar'
</style>
